<template>
  <div class="web_foot">
    <div class="content">
      <div>
        <h2 class="mb20">影彩科技</h2>
        <h4>IMAGE COLOR</h4>
      </div>
      <div class="text plan">
        <h5>解决方案</h5>
        <p @click="toDetails(1)">标签管理系统解决方案</p>
        <p @click="toDetails(2)">商业ERP管理系统</p>
      </div>
      <div class="text">
        <h5>适用行业</h5>
        <p>日化品行业</p>
        <p>美妆行业</p>
        <p>物流行业</p>
      </div>
      <div class="text plan">
        <h5>关于我们</h5>
        <p @click="toDetails(3)">企业介绍</p>
        <p @click="toDetails()">人才招聘</p>
        <p @click="toDetails()">服务协议</p>
        <p @click="toDetails()">隐私权政策</p>
      </div>
      <div class="y_axis"></div>
      <div class="text">
        <h5>联系我们</h5>
        <el-image :src="require('@/assets/official.png')" class="mr16"></el-image>
        <el-image :src="require('@/assets/official1.png')"></el-image>
      </div>
      <div class="text mt40">
        <p><i class="iconfont homeIcon"></i>重庆市九龙坡区启迪科技园3栋</p>
        <p><i class="iconfont phoneIcon"></i>023-68160392</p>
        <p><i class="iconfont networkIcon"></i>https://www.imagecolor.cn</p>
        <p><i class="iconfont msgIcon"></i>cqyc@imagecolor.cn</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    name: "web_foot",
    methods: {
      // 页面跳转
      toDetails(type) {
        if (type == 1) {
          this.$router.push({
            path: "/label"
          })

        } else if (type == 2) {
          this.$router.push({
            path: "/business"
          })
        } else {
          this.$router.push({
            path: '/about',
            query: {
              distance: 400
            }
          }).catch(() => {})
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .web_foot {
    width: 100%;
    height: 280px;
    margin-top: 100px;

    .content {
      width: 1300px;
      margin: auto;
      display: flex;


      .text {
        margin-left: 60px;
        text-align: left;

        h5 {
          margin-bottom: 20px;
        }

        p {
          margin-bottom: 10px;
          color: #999;

          i {
            margin-right: 10px;
          }
        }

        .el-image {
          width: 100px;
          height: 100px;
        }
      }

      .plan {
        p {
          cursor: pointer;

          &:hover {
            color: #3f61f1;
          }
        }
      }

      .y_axis {
        height: 100px;
        margin-left: 80px;
        width: 1px;
        background: #000;
      }
    }
  }
</style>